<template>


  <div id="ModifyFormation">

    <el-descriptions class="margin-top" title="我的信息" :column="1" :size="'medium'" :data="userInfo" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="dialogFormVisible = true">修改我的信息</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label"><i class="el-icon-user"></i>用户名</template>
        {{ userInfo.userName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"><i class="el-icon-mobile-phone"></i>手机号</template>
        {{ userInfo.userPhone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"><i class="el-icon-location-outline"></i>居住地</template>
        {{ userInfo.userAddress }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"><i class="el-icon-tickets"></i>性别</template>
        <el-tag size="small">{{ userInfo.userGender }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"><i class="el-icon-office-building"></i>账号状态</template>
        {{ userInfo.userState }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"><i class="el-icon-timer"></i>账号创建时间</template>
        {{ userInfo.createTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label"><i class="el-icon-water-cup"></i>账户余额</template>
        {{ userInfo.userBalance }}
      </el-descriptions-item>
    </el-descriptions>

    <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.userPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.userAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="form.userGender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="headerUrl">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/upload/header"
              name="img"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="form.headerUrl" :src="form.headerUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserInfo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {changeUser, getUserInfo} from "@/API/UserAPI";
import {changeuserInfo} from "@/API/UserAPI";
import {Message} from "element-ui";
import message from "@/utils/message";
import WebUtils from "@/utils/webUtils";

export default {
  name: "UserInfo",
  data() {
    return {
      headers:{
        token:localStorage.getItem('token'),
      },
      userInfo: {
        userName:"",
        userPhone:"",
        userAddress:"",
        userGender:"",
        headerUrl: "",
      },
      dialogFormVisible: false,
      form: {
        userId:"",
        userName: "",
        userPhone: "",
        userAddress: "",
        userGender: "",
        headerUrl: "",
      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      try {
        let result = await getUserInfo();
        if(result.code === 1){
          this.userInfo = result.data;
        }
      } catch (error) {
        message.error(this, "用户信息加载失败。");
      }
      this.userInfo.userGender = (this.userInfo.userGender === 1) ? "男" : "女";
      this.userInfo.userState = (this.userInfo.userState === 0) ? "正常" : "您的账号目前被封禁，请联系管理员";
      this.form.userName = this.userInfo.userName;
      this.form.userPhone = this.userInfo.userPhone;
      this.form.userAddress = this.userInfo.userAddress;
      this.form.userGender = this.userInfo.userGender;
    },
    // 处理头像上传成功
    handleAvatarSuccess(res)
    {//单独改
      console.log(res);

      if (res.code !== 1) {
        return this.$message.error("上传头像失败！");
      }
      this.form.headerUrl = res.data;
    },
    // 限制头像上传大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 更新用户信息
    async updateUserInfo() {
      this.dialogFormVisible = false;
      if(this.userInfo.headersUrl === this.form.headerUrl) this.form.headersUrl=null;
      if(this.userInfo.userAddress === this.form.userAddress) this.form.userAddress=null;
      if(this.userInfo.userGender === this.form.userGender) this.form.userGender=null;
      if(this.userInfo.userPhone === this.form.userPhone) this.form.userPhone=null;
      if(this.userInfo.userName === this.form.userName) this.form.userName=null;

      this.form.userId = this.userInfo.userId;
      this.form.userGender = (this.form.userGender === "男") ? 1 : 2;
      console.log(+this.form.userId);
      let result = await changeUser(this.form);
      console.log(result);
    }
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<style scoped>
/* 信息列表样式 */
.msg-box > li {
  list-style: none;
  border-bottom: 1px solid #c5c5c5;
}

.msg-box li {
  line-height: 200%;
  padding-bottom: 2%;
}

/* 头像样式 */
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  border: 1px dashed #d9d9d9;
}
</style>
